<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width:80px;
            height: 80px;
            margin: 50px auto;
            border: 6px solid rgba(255,255,255,0.5);
            border-radius: 50%/30% 70% 25% 50%;
            background-color: #B45227;
            position: relative;
        }
        div p{
            position: absolute;
            border-radius: 50%;
            background: rgba(150,72,37,0.5);
        }
        div p.x{
            width: 50px;
            height: 4px;
            left: 15px;
        }
        div p.y{
            width: 4px;
            height: 50px;
            top:15px;
        }
        div p.x:nth-of-type(1){top:30px;}
        div p.x:nth-of-type(2){top:40px;}
        div p.x:nth-of-type(3){top:50px;}

        div p.y:nth-of-type(4){left:25px;}
        div p.y:nth-of-type(5){left:40px;}
        div p.y:nth-of-type(6){left:55px;}
    </style>
</head>
<body>
    <div>
        <p class="x"></p>
        <p class="x"></p>
        <p class="x"></p>
        <p class="y"></p>
        <p class="y"></p>
        <p class="y"></p>
    </div>
</body>
</html>